@keyframes scalein
  0%
    transform scale(0.5) translateY(0px)
    opacity 0
  100%
    transform scale(1) translateY(0px)
    opacity 1

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1)
  }

  0% {
    opacity 0
    transform scale3d(0.3, 0.3, 0.3)
  }

  20% {
    transform scale3d(1.1, 1.1, 1.1)
  }

  40% {
    transform scale3d(0.9, 0.9, 0.9)
  }

  60% {
    opacity 1
    transform scale3d(1.03, 1.03, 1.03)
  }

  80% {
    transform scale3d(0.97, 0.97, 0.97)
  }

  to {
    opacity 1
    transform scale3d(1, 1, 1)
  }
}
.bounceIn {
  animation-duration 0.75s
  animation-name bounceIn
}

.scaleIn
  animation scalein 600ms var(--cubic) !important

.loader,
.loader:after {
  border-radius 100%
  width 7em
  height 7em
}
.loader {
  font-size 7px
  position relative
  text-indent -9999em
  border-top 6px solid var(--outerspace01)
  border-right 6px solid var(--outerspace01)
  border-bottom 6px solid var(--outerspace01)
  border-left 6px solid var(--outerspace08)
  transform translateZ(0)
  animation load8 1.1s infinite linear !important
}
@keyframes load8 {
  0% {
    transform rotate(0deg)
  }
  100% {
    transform rotate(360deg)
  }
}

@keyframes shine {
  0% {
    transform translateY(-2000px)
  }
  100% {
    transform translateY(0)
  }
}

@keyframes sk-scaleout
  0%
    transform scale(0)
  100%
    transform scale(1.0)
    opacity 0

@keyframes spin
  0%
    transform rotate(45deg)
  100%
    transform rotate(405deg)

@keyframes sheen
  0%
    transform translateX(-300px) rotate(-30deg)
  80%
    transform translateX(-300px) rotate(-30deg)
  95%
    transform translateX(300px) rotate(30deg)
  100%
    transform translateX(-300px) rotate(60deg)

.spinner
  width 100px
  height 100px
  margin 100px auto
  background-color var(--outerspace08)
  border-radius 100%
  animation sk-scaleout 600ms infinite var(--cubic)
  will-change transform, opacity

.signSuccess
  width 100px
  height 100px
  margin 100px auto
  background-color var(--outerspace08)
  border-radius 100%
  animation sk-scaleout 600ms infinite var(--cubic)

.slideUp-enter
  opacity 0
  margin-top -200px
  transition var(--standardSlow)

.slideUp-enter.slideUp-enter-active
  opacity 1
  margin-top 0px
  transition var(--standardSlow)
  transition-delay 0.32s

.slideUp-leave
  opacity 1
  transition var(--standardSlow)

.slideUp-leave.slideUp-leave-active
  opacity 0
  margin-top -200px

.signerRequests
  z-index 200
  transition var(--standardSlow)
  transform translateZ(0)
  overflow hidden

.requestTitle
  position relative
  display flex
  align-items flex-end
  justify-content space-between
  height 26px
  font-size 13px
  padding 0px 10px 10px 10px
  text-transform uppercase
  letter-spacing 4px
  font-weight 300

  .requestCount
    background var(--thin)
    width 50px
    height 20px
    border-radius 15px
    display flex
    justify-content center
    align-items center
    font-weight 300

.requestBottom
  position relative
  display flex
  align-items center
  justify-content center
  height 40px
  padding-left 10px
  padding-right 10px

  svg
    color var(--outerspace08)

.requestGroup
  padding 16px 20px 7px 20px
  display flex
  justify-content space-between

  img 
    border-radius 12px

  .requestGroupMain
    display flex
    align-items center

  .requestGroupName
    font-weight 400
    font-size 12px

  .requestGroupButton
    font-weight 400
    font-size 12px
    cursor pointer
    height 22px
    width 22px
    border-radius 11px
    background var(--ghostB)
    position relative
    display flex
    justify-content center
    align-items center
    border 2px solid var(--ghostZ)
    color var(--mint)

    .requestGroupButtonLabel
      position absolute
      top 0
      right 0
      bottom 0
      width 74px
      cursor pointer
      text-transform uppercase
      height 22px
      font-size 10px
      display flex
      justify-content center
      align-items center
      border-radius 9px
      opacity 0
      pointer-events none
      background var(--ghostB)
      letter-spacing 1px
      padding-left 2px

  .requestGroupButton:hover
    width 74px
    .requestGroupButtonLabel
      opacity 1
      pointer-events auto

.requestContainerWrap
  margin 12px 6px
  padding 0px 3px 21px 3px
  box-sizing border-box
  overflow auto
  background var(--ghostZ)
  position relative
  min-height calc(100% - 25px)

  .requestContainerEmpty
    position absolute
    top 0
    right 0
    bottom 100px
    left 0
    display flex
    justify-content center
    align-items center
    font-family VCR
    font-size 18px
    letter-spacing 1px
    font-weight 600

  .requestContainer
    width 100%
    position relative

  .noRequests
    font-size 10px
    text-transform uppercase
    font-weight 400
    letter-spacing 1px
    padding-left 1px
    display flex
    justify-content center
    align-items center
    transition var(--standard)
    background var(--ghostA)
    color var(--outerspace04)
    margin-top 3px
    height 48px
    font-weight 400
    border-radius 17px
    padding-top 2px
    border-bottom 2px solid var(--ghostZ)
    box-shadow 0px 2px 4px var(--ghostY)

  .recentRequests
    position absolute
    top 1px
    left 11px
    right 11px
    height 20px
    pointer-events none
    justify-content space-between
    align-items center
    display flex
    text-transform uppercase
    font-size 11px
    line-height 10px
    font-weight 300
    letter-spacing 2px
    transition var(--standard)
    color var(--outerspace08)

.signerRequestItems
  overflow scroll

.signerRequest
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  width 100%
  justify-content space-between
  transition var(--standardFast)
  z-index 2000
  color var(--outerspace)
  transform translateZ(0)

.requestMeta
  position relative
  width 100%
  margin-top 8px
  margin-bottom 10px
  font-size 10px
  font-weight 300
  position relative
  display flex
  align-items space-between
  width 100%
  box-sizing border-box
  height 72px
  display none

  .requestMetaChainIcon
    position absolute 
    left 12px
    top 12px
    background var(--ghostZ)
    width 48px
    height 48px
    border-radius 24px
    overflow hidden
    display flex
    justify-content center
    align-items center
    color var(--outerspace)

    img
      max-height 24px
      max-width 24px
      color var(--outerspace)
  
  .requestMetaChainInfo
    position absolute 
    left 72px
    top 0
    bottom 1px
    right 64px
    display flex
    justify-content center
    align-items flex-start
    flex-direction column

.requestMetaChain
  font-size 18px
  text-align left
  font-weight 400
  padding-left 0px
  font-family 'MainFont'
  display flex
  align-items center

.requestMetaOrigin
  font-size 12px
  text-align left
  font-weight 400
  padding-left 0px
  font-family 'MainFont'
  display flex
  align-items center
  position relative
  top 1px
  left 0px

  .requestMetaOriginIcon
    margin-right 4px
    color var(--good)

.requestMetaNonce
  height 24px
  border-radius 6px
  background var(--ghostB)
  display flex
      
.requestOverlay
  display none
  position absolute
  top 0px
  left 0px
  right 0px
  bottom 0px
  z-index 9999999999999
  border-radius 8px
  pointer-events none
  overflow hidden
  .requestSheen
    position absolute
    z-index 30000002
    top -400%
    height 1000%
    width 90px
    animation sheen 12s infinite ease
    background linear-gradient(90deg, rgba(247, 251, 255, 0), rgba(237, 241, 255, 0.7), rgba(247, 251, 255, 0))
    background-blend-mode multiply
    will-change transform

.signerRequestSuccess
  align-items center
  .requestApprove
    opacity 0
    pointer-events none

.signerRequestPending
  align-items center
  svg
    color var(--outerspace08)
  .requestApprove
    opacity 0
    pointer-events none

.signerRequestError
  align-items center
  .requestApprove
    opacity 0
    pointer-events none

.signerRequestDeclined
  align-items center
  .requestApprove
    opacity 0
    pointer-events none

.signerRequestMonitor
  align-items center
  background var(--ghostA)
  svg
    color var(--outerspace)
  .requestApprove
    opacity 0
    pointer-events none

.requestNoticeError
  color var(--bad)
  fill car(--bad)

.requestNoticeSuccess
  color var(--good)
  fill car(--good)

.requestNotice, .requestCover
  box-sizing border-box
  height 200px
  font-size 14px
  -webkit-app-region no-drag
  pointer-events auto
  opacity 1
  display flex
  justify-content space-around
  align-items center
  font-weight 300
  z-index 999999999999999
  transition var(--standard)
  animation 0.32s fadeUp ease-out

.requestNoticeInner
  height 100%
  width 100%
  position relative
  display flex
  justify-content center
  align-items center
  flex-direction column

  .requestNoticeInnerSymbol
    padding-bottom 20px

  .requestNoticeInnerText
    font-size 12px
    font-weight 400
    text-transform uppercase
    letter-spacing 2px
    white-space normal
    padding 0px 40px
    text-align center

  .cancelRequest
    font-size 10px
    background var(--thin)
    height 20px
    width  100px
    margin 16px auto 0px auto
    border-radius 8px
    letter-spacing 2px
    font-weight 400
    display flex
    justify-content center
    align-items center
    text-transform uppercase
    cursor pointer
    *
      pointer-events none

  .cancelRequest:hover
    background var(--thick)

.requestProvider
  display flex
  justify-content center
  align-items center
  flex-direction column
  transform translateZ(0px)
  padding 120px 0px 120px 0px
  margin 16px 4px
  border-radius 20px
  width calc(100% - 16px)
  box-sizing border-box
  background var(--ghostA)
  box-shadow 0px 6px 6px var(--ghostY)
  font-family 'MainFont'

  .requestProviderOrigin
    font-size 22px
    font-weight 300
    width 300px
    text-align center
    transform translateZ(0px)
    direction rtl
    text-overflow ellipsis
    white-space nowrap
    overflow hidden

  .requestProviderOrigin18
    font-size 17
    font-weight 300

  .requestProviderOrigin12
    font-weight 300
    font-size 14

  .requestProviderSub
    font-size 12px
    font-weight 300
    letter-spacing 2px
    text-transform uppercase
    display flex
    justify-content center
    align-items center
    margin-top 6px
    transform translateZ(0px)
    letter-spacing 1px

// .requestFooter::before
//   content ''
//   position absolute
//   inset 4px
//   background var(--ghostZ)
//   border-radius 18px
//   z-index 99999999

.requestFooter
  font-size 12px
  opacity 0
  transition var(--standard)
  font-family 'MainFont'
  // pointer-events none
  transform translateY(0px) 
  display flex
  justify-content center
  align-items center
  text-transform uppercase
  font-weight 300
  transform scale(0.8)
  position absolute
  bottom 50px
  left 16px
  right 16px
  border-radius 26px
  z-index 99999999
  background var(--ghostZ)
  padding 2px

.automaticFeeUpdate
  font-size 12px
  opacity 0
  transition var(--standard)
  font-family 'MainFont'
  transform translateY(0px) 
  display flex
  justify-content center
  align-items center
  text-transform uppercase
  font-weight 300
  transform scale(0.8)
  filter blur(20px)
  background linear-gradient(to top, var(--ghostZ) 25%, var(--ghostZ0) 100%)
  position absolute
  top -58px
  left 8px
  right 8px
  border-radius 24px
  border-top-right-radius 0px
  border-top-left-radius 0px
  z-index 99999999
  padding-top 8px
  padding-bottom 8px
  pointer-events none

.automaticFeeUpdateActive
  filter blur(0px)
  opacity 1
  pointer-events auto
  transform scale(1)
  .requestApproveFee
    .requestApproveFeeButton 
      pointer-events auto

.txActionButtons
  position relative
  display flex
  flex-wrap wrap
  z-index 999999999
  width 100%
  font-weight 400

  .txActionButtonsRow
    width 100%
    display flex
    justify-content center
    align-items center

    *
      border-radius 6px

    .txActionText:first-child, .txActionButton:first-child
      border-radius 20px
      border-bottom-right-radius 6px
      border-top-right-radius 6px

    .txActionText:last-child, .txActionButton:last-child
      border-radius 20px
      border-bottom-left-radius 6px
      border-top-left-radius 6px

    .txActionText:first-child:last-child, .txActionButton:first-child:last-child
      border-radius 20px

    .txActionText
      background var(--ghostA)
      height 40px
      display flex
      margin 1px
      flex 3
      justify-content center
      align-items center
      padding-top 3px
      box-sizing border-box
      background var(--ghostA)
      box-shadow 0px 1px 2px var(--ghostZ)
      border-bottom 2px solid var(--ghostZ)

    .txActionButton
      background var(--ghostA)
      box-sizing border-box
      height 40px
      margin 1px
      flex 1
      cursor pointer
      display flex
      justify-content center
      align-items center
      padding-top 3px
      box-sizing border-box
      background var(--ghostA)
      box-shadow 0px 1px 2px var(--ghostZ)
    
    .txActionButton:hover
      background var(--ghostB)

    .txActionButtonGood
      color var(--good)

    .txActionButtonBad
      color var(--bad)
    
    .txActionButtonDisabled
      color var(--outerspace05)
      cursor default
    
    .txActionButtonDisabled:hover
      background var(--ghostA)

  .requestApproveFeeReject
    color var(--moon)
    position absolute 
    left 10px
    bottom 11px
    top 35px
    right calc(50% + 2.5px)

  .requestApproveFeeAccept
    color var(--good)
    position absolute 
    right 10px
    bottom 11px
    top 35px
    left calc(50% + 2.5px)

.requestFooterActive
  filter blur(0px)
  opacity 1
  transform scale(1)
  .requestApproveFee
    .requestApproveFeeButton 
      pointer-events auto

.approveTransaction, .approveRequest
  position absolute
  top 0
  right 0
  bottom 0px
  left 0
  padding 64px 0px
  border-radius 24px
  overflow-y scroll

  .approveTransactionIcon
    width 100%
    padding-top 10px
    padding-bottom 10px
    display none

    svg
      color var(--outerspace08)

  .approveRequestHeader
    position absolute
    top 5px
    left 5px
    right 5px
    height 50px
    display flex
    justify-content center
    align-items center
    font-weight 400
    font-size 14px
    background var(--ghostD)
    color var(--outerspace)
    border-radius 8px
    text-transform uppercase

    .approveRequestHeaderTitle
      text-align center
      letter-spacing 2px

    .approveRequestHeaderOrigin
      font-size 10px
      letter-spacing 0px
      text-transform none

    .approveRequestHeaderTag
      position absolute
      bottom -8px
      left 80px
      right 80px
      height 16px
      border-radius 8px
      box-sizing border-box
      padding-top 1px
      font-size 10px
      text-align center
      font-weight 300
      background var(--good)
      color var(--spacewhite)

    .approveRequestHeaderTagInvalid
      background var(--bad)

    .approveRequestHeaderIcon
      width 40px
      height 60px
      display flex
      justify-content center
      align-items center
      z-index 10
      transition var(--standard)
      position absolute
      border-radius 2px
      left 5px
      color var(--outerspace08)

    .approveRequestHeaderNonce
      width 80px
      height 60px
      display flex
      justify-content flex-end
      align-items center
      z-index 10
      transition var(--standard)
      position absolute
      border-radius 2px
      right 10px
      color var(--outerspace08)

    .approveRequestHeaderClose
      width 60px
      display flex
      justify-content center
      align-items center
      z-index 10
      transition var(--standard)
      opacity 0

  .approveTransactionPayload
    display flex
    align-items center
    flex-direction column
    width 100%

.signValue
  font-size 20px
  font-weight 300
  overflow-y scroll
  overflow-x hidden

  .signValueMore
    position fixed
    pointer-events none
    bottom 60px
    left 5px
    right 5px
    background var(--ghostD)
    color var(--moon)
    border-radius 8px
    height 24px
    z-index 2000
    text-align center
    padding none
    font-size 12px
    text-transform uppercase
    font-weight 300
    display flex
    justify-content center
    align-items center

  .signValueInner
    width 100%
    display flex
    justify-content space-around
    align-items center
    text-align center
    flex-direction column
    font-size 16px
    padding 40px 10px 20px 10px
    min-height 100%
    box-sizing border-box
    word-break break-word
    white-space break-spaces
    user-select all
    font-family 'FiraCode'
    font-weight 400

.transactionValue
  position absolute
  top 50px
  left 0
  right 0
  height 55px
  display flex
  justify-content space-around
  align-items center
  flex-direction column
  font-size 20px
  padding 15px 10px 15px 10px
  font-weight 300

.transactionSubtitle
  text-transform uppercase
  font-size 13px
  font-weight 400
  letter-spacing 1px

.transactionSymbol
  display flex
  justify-content center
  align-items center
  font-size 16px
  font-weight 300
  font-family 'FiraCode'
  margin 2px 8px 0px 0px 
  padding 0px 16px
  background var(--ghostD)
  border-radius 12px
  height 25px
  min-height 25px
  max-height 25px
    
.transactionTotals
  display flex
  justify-content center
  align-items center
  font-size 28px

.transactionTotalETH
  display flex
  justify-content center
  align-items center

.networkFeeSymbol
  position relative
  font-size 12px
  font-family 'FiraCode'
  left -2px
  top 1px

.transactionTotalUSD
  display flex
  justify-content center
  align-items center
  font-size 16px
  font-family 'FiraCode'
  margin 2px 0px 0px 8px 
  padding 0px 16px
  background var(--ghostD)
  border-radius 12px
  height 24px
  min-height 24px
  max-height 24px

.transactionWarning
  color var(--bad)

.transactionFeeWarning
  color var(--bad)
  position absolute
  top 0
  left 0
  right 0
  height 20px
  display flex
  justify-content center
  align-items center

.transactionFee
  position absolute
  top 120px
  left 0
  right 0
  height 45px
  display flex
  justify-content space-around
  align-items center
  flex-direction column
  padding 15px 10px 10px 10px
  font-weight 300

  .transactionTotals
    font-size 20px

  .transactionTotalUSD
    font-size 15px
    padding 2px 8px
    font-weight 300

.transactionData
  position absolute
  left 10px
  right 10px
  top 171px
  height 32px
  z-index 2000
  display flex
  justify-content center
  align-items center
  color var(--outerspace08)
  font-size 14px
  font-weight 400
  letter-spacing 1px
  text-transform uppercase
  transition var(--standard)

  .transactionDataHeader
    position absolute
    top 0
    left 0
    right 0
    height 32px
    border-radius 12px
    justify-content space-between
    display flex
    align-items center
    text-transform uppercase
    letter-spacing 1px
    font-weight 400
    z-index 10
    background var(--ghostD)
    box-shadow 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick)

    .transactionDataLabel
      display flex
      justify-content center
      align-items center
      z-index 10
      transition var(--standard)

    .transactionDataNotice
      width 32px
      display flex
      justify-content center
      align-items center
      z-index 10
      transition var(--standard)
      color var(--outerspace08)

    .transactionDataIndicator
      width 21px
      height 21px
      max-width 21px
      max-height 21px
      z-index 10
      transform rotate(-180deg)
      transition var(--standardSlow)
      border 2px solid var(--thick)
      border-radius 12px
      margin 4px

      svg
        position relative
        top 3px
        left 5px

.transactionDataBody
  position absolute
  color var(--outerspace08)
  top 35px
  left 0
  right 0
  bottom 0
  display flex
  padding 16px 14px
  user-select all
  overflow hidden
  z-index 90
  background var(--ghostD)
  border-radius 12px
  opacity 0
  pointer-events none
  transition var(--standard)
  box-shadow 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick)

  .transactionDataBodyCopied
    position absolute
    top 0
    left 0
    right 0
    display flex
    justify-content center
    align-items center
    font-size 16px
    letter-spacing 0px
    height 76px

    svg
      margin -3px 0px 0px 10px

  .transactionDataBodyInner
    opacity 0
    top -100px
    position relative
    max-width 100%
    width 100%
    height 100%
    font-size 15px
    text-transform none
    transition var(--standardSlow)
    overflow-wrap break-word
    word-wrap break-word
    font-family 'FiraCode'
    overflow-x hidden
    overlflow-y scroll
    border-radius 6px

.transactionDataSelected
  position absolute
  left 5px
  right 5px
  top 43px
  height 280px

  .transactionDataHeader
    .transactionDataIndicator
      transform rotate(0deg)

  .transactionDataBody
    opacity 1
    pointer-events auto
    .transactionDataBodyInner
      opacity 1
      top 0px

.transactionNoData
  background var(--ghostD)
  border-radius 12px
  box-shadow 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick)

.transactionTo
  height 60px
  width 100%
  display flex
  justify-content center
  align-items center
  flex-direction column
  position absolute
  bottom 85px
  right 0
  left 0

  .transactionToAddress
    font-size 12px
    font-family 'FiraCode'
    position relative
    height 25px
    width 100%
    -webkit-app-region no-drag

    .transactionToAddressLarge
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      display flex
      justify-content center
      align-items center
      font-size 20px
      opacity 1
      transition var(--standard)

    .transactionToAddressFull
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      display flex
      justify-content center
      align-items center
      font-size 13px
      opacity 0
      transition var(--standard)
      font-weight 300
      cursor pointer
      z-index 200
      
      *
        pointer-events none

      svg
        position relative
        top -3px
        margin-left 10px

  .transactionToSub
    font-weight 400
    text-transform uppercase
    font-size 13px
    letter-spacing 1px

.unknownType
  display flex
  justify-content center
  align-items center
  width 100%
  margin-bottom 60px
  padding 20px

@keyframes fadeUp
  0%
    opacity 0
  70%
    opacity 0
    transform translateY(10px)
  100%
    opacity 1
    transform translateY(0px)

.requestApprove
  box-sizing border-box
  height 88px
  font-size 16px
  -webkit-app-region no-drag
  pointer-events auto
  opacity 1
  display flex
  justify-content space-around
  align-items center
  z-index 999999999
  border-radius 24px
  position relative
  background var(--ghostZ)
  animation 0.48s fadeUp ease-out
  margin 10px 8px 40px 8px

  .requestDecline
    position absolute
    top 4px
    left 4px
    right calc(50% - 1px)
    bottom 4px
    z-index 40
    text-transform uppercase

  .requestDeclineButton
    position absolute
    top 0px
    right 0px
    bottom 0px
    left 0px
    transform translateZ(0px)
    display flex
    justify-content center
    align-items center
    -webkit-app-region no-drag
    letter-spacing 2px
    padding-left 2px
    padding-bottom 10px
    cursor pointer
    border-top-right-radius 12px
    border-bottom-right-radius 12px
    *
      pointer-events none

    span
      position relative
      z-index 99

  .requestDeclineButton:before
    content ''
    position absolute
    margin-left -1px
    height 4px
    border-radius 2px
    width 30px
    background var(--bad)
    bottom 26px
    z-index 80

  .requestDeclineButton:hover:before
    background var(--badOver)

  .requestSign
    position absolute
    top 4px
    right 4px
    left calc(50% - 1px)
    bottom 4px
    z-index 40
    text-transform uppercase

  .requestSignButton
    position absolute
    top 0px
    left 6px
    bottom 0px
    right 0px
    transform translateZ(0px)
    display flex
    justify-content center
    align-items center
    -webkit-app-region no-drag
    letter-spacing 2px
    padding-left 2px
    padding-bottom 10px
    border-top-left-radius 12px
    border-bottom-left-radius 12px

    *
      pointer-events none

    span
      position relative
      z-index 99


  .requestSignButton:before
    content ''
    position absolute
    margin-left -1px
    height 4px
    border-radius 2px
    width 30px
    background var(--good)
    bottom 26px
    z-index 98

  .requestSignButton:hover:before
    background var(--goodOver)

.requestApproveSimple
  bottom 40px

.requestScaleButtonSign
  animation scalein 3000ms var(--cubic) !important

.requestScaleButtonDecline
  animation scalein 1500ms var(--cubic) !important

.requestQuickButton
  animation scalein 800ms var(--cubic) !important

.requestApproveDisabled
  pointer-events none
  opacity 0.2
  .requestDecline
    pointer-events none
  .requestSign
    pointer-events none

.signerRequestsHidden
  left -100%
  right 100%

@keyframes pending
  15%
    opacity 0.2
  25%
    opacity 1
  100%
    opacity 1

.monitorConfirms
  position absolute
  bottom 6px
  left 0px
  right 0
  padding 0px 20px 12px 17px
  display flex
  justify-content space-between
  z-index 1002
  box-sizing border-box

  .txProgressConfirmsItem
    font-size 12px
    font-weight 300
    color var(--ghostY)
    svg
      max-width 14px
      min-width 14px
      color var(--outerspace)
      transition var(--standardFast)
      animation pending 4.2s linear infinite
      color var(--ghostX)
      will-change opacity

  .txProgressConfirmsItemActive
    svg
      color var(--good)

  .txProgressConfirmsItemGood
    svg
      color var(--good)

  *:nth-child(1) 
    svg
      animation-delay 0.0s
  *:nth-child(2) 
    svg
      animation-delay 0.1s
  *:nth-child(3) 
    svg
      animation-delay 0.2s
  *:nth-child(4) 
    svg
      animation-delay 0.3s
  *:nth-child(5) 
    svg
      animation-delay 0.4s
  *:nth-child(6) 
    svg
      animation-delay 0.5s
  *:nth-child(7) 
    svg
      animation-delay 0.6s
  *:nth-child(8) 
    svg
      animation-delay 0.7s
  *:nth-child(9) 
    svg
      animation-delay 0.8s
  *:nth-child(10) 
    svg
      animation-delay 0.9s
  *:nth-child(11) 
    svg
      animation-delay 1.0s
  *:nth-child(12) 
    svg
      animation-delay 1.1s

.monitorIcon
  position absolute
  width 50px
  height 40px
  top 0
  left 0
  box-sizing border-box
  padding 14px 17px

.monitorIconIndicator
  position absolute
  height 4px
  border-radius 2px
  width 100%
  background var(--outerspace08)
  top 43px
  left 14px
  width 24px

.monitorTo
  font-family 'MainFont'
  display flex
  justify-content flex-start
  align-items center
  font-weight 300
  height 26px
  min-height 26px
  max-height 26px
  max-width 214px
  font-size 8px
  overflow hidden
  position relative
  top -2px

  *
    flex-shrink 0
    padding 2px

  svg
    position relative
    padding 0px 3px
    top 1px

.monitorValue
  display flex
  justify-content center
  align-items center
  color var(--outerspace)
  font-size 14px
  position relative
  top -1px

.monitorValue0x
  text-transform lowercase
  padding 0

.monitorSubHighlight
  color var(--outerspace)
  font-size 14px
  text-transform uppercase
  position relative
  top -1px

.monitorArrow
  padding-top 1px

.monitorDeploy
  text-transform uppercase
  font-size 13px
  letter-spacing 1px
  font-weight 300

span
  padding 0px 3px 0px 0px

.txNonceMarker
  background var(--ghostD)
  width 29px
  border-radius 6px

.txNonceNumber
  width 48px
  text-align center
  opacity 1
  font-weight 400
  font-size 13px
  display flex
  justify-content center 
  align-items center

.txNonceHidden
  color var(--outerspace06)
  opacity 0

.txNonceControl
  position absolute
  top 0
  right -130px
  width 130px
  display flex
  justify-conent space-between

.txNonceButton
  height 21px
  width 25px
  display flex
  justify-content center 
  align-items center
  font-size 10px
  text-transform uppercase
  cursor pointer

  *
    pointer-events none

.txNonceButtonLower 
  padding 1px 0px 0px 4px

.txNonceButtonRaise
  padding 0px 0px 1px 0px

.txNonceLabel
  height 100%
  width 70px
  text-align center
  font-size 10px
  text-transform uppercase
  border-right 1px solid var(--ghostC)
  display flex
  justify-content center 
  align-items center

.txNonceSet
  transform translate(3px, -3px)
  height 20px

.monitorTop
  position absolute
  z-index 1001
  top 0px
  left 53px
  right 53px
  height 40px
  padding 10px 16px 3px 0px
  font-size 14px
  text-transform none
  transition var(--standardSlow)
  overflow-wrap break-word
  word-wrap break-word
  overflow-x hidden
  display flex
  justify-content space-between
  font-weight 400
  color var(--outerspace08)
  box-sizing border-box

.monitorBot
  position absolute
  z-index 1001
  height 35px
  bottom 1px
  left 10px
  right 12px
  font-size 12px
  text-transform none
  transition var(--standardSlow)
  overflow-wrap break-word
  word-wrap break-word
  text-transform uppercase
  overflow-x hidden
  display flex
  justify-content center
  align-items center
  font-weight 00
  letter-spacing 1px
  color var(--outerspace08)

  span
    padding 0px 7px 0px 0px

  svg
    padding 0px 3px 0px 3px

.txAugment
  position absolute
  bottom 60px
  left 5px
  height 32px
  right 5px
  font-size 12px
  display flex
  justify-content space-between
  align-items center
  text-transform uppercase  
  letter-spacing 0.2px
  font-weight 300
  border-radius 16px
  background var(--ghostD)
  z-index 20000000009999
  
  .txAugmentCancel
    position absolute
    top 0px
    left 0px
    bottom 0px
    border-radius 4px
    border-top-left-radius 16px
    border-bottom-left-radius 16px
    right 72%
    color var(--bad)
    display flex
    justify-content center
    align-items center
    transform translateY(0px)
    cursor pointer
    *
      pointer-events none
  
  .txAugmentSpeedUp
    position absolute
    top 0px
    right 0px
    bottom 0px
    border-radius 4px
    border-top-right-radius 16px
    border-bottom-right-radius 16px
    left 72%
    color var(--good)
    display flex
    justify-content center
    align-items center
    transform translateY(0px)
    cursor pointer
    *
      pointer-events none

  .txDetails
    position absolute
    top 0px
    right 28%
    left 28%
    border-radius 4px
    bottom 0
    display flex
    justify-content center
    align-items center
    transform translateY(0px)
    z-index 900000000
    *
      pointer-events none

  .txDetailsOptions
    position absolute
    top 0px
    left 0px
    right 0px
    bottom 0
    font-size 11px
    display flex
    justify-content center
    align-items center
    z-index 9000000000

    .txDetailsOptionsOpen, .txDetailsOptionsCopy
      height 30px
      border-radius 6px
      display flex
      justify-content center
      align-items center
      padding 0px 14px
      box-sizing border-box
      cursor pointer
      background var(--ghostD)

      *
        pointer-events none

    .txDetailsOptionsOpen:hover, .txDetailsOptionsCopy:hover
      background var(--ghostD)
      transform scale(1.05)
      box-shadow 0px 14px 6px -3px var(--ghostB)

  .txDetailsOptionsTxHash
    color var(--good)

  .txDetailsHide
    pointer-events none 
    opacity 0

  .txAugmentCancel:hover, .txAugmentSpeedUp:hover
    background var(--ghostD)
    transform scale(1.05)
    box-shadow 0px 14px 6px -3px var(--ghostB)

.txAugmentHidden
  .txAugmentCancel
    opacity 0
    transition var(--standard)
    background var(--ghostD)
    transform translateY(-25px) scale(1.05)
    box-shadow 0px 4px 5px -3px var(--thick), 0px 35px 20px -5px var(--thick)
    pointer-events none
  .txAugmentSpeedUp
    opacity 0
    background var(--ghostD)
    transform translateY(-25px) scale(1.05)
    transform translateY(-25px)   
    transition var(--standard)
    pointer-events none

.txSuccessHash
  position absolute
  top 60px
  left 5px
  height 32px
  width 199px
  display flex
  justify-content center
  align-items center
  font-weight 300
  transition var(--standardSlow)
  opacity 0
  transform translateY(25px)
  font-family 'FiraCode'
  overflow hidden
  font-size 16px
  padding-top 2px
 
  svg
    color var(--outerspace08)
    padding 4px 5px 2px 5px

.txSuccessHashShow
  opacity 1
  transform translateY(0px)

.txStatus
  border-radius 12px
  text-align center
  box-sizing border-box
  z-index 100000
  font-size 14px
  font-weight 400
  text-transform uppercase
  letter-spacing 0.5px
  margin-left 0.5px
  transition var(--standard)
  display flex
  justify-content center
  align-items center
  width 100%
  height 100%
  display none

.txStatusError
  top 30px
  bottom 0px

.txProgressSuccess
  position absolute
  right 16px
  top 20px
  left 16px
  z-index 1000005
  display flex
  align-items center
  transition var(--standard)

  .txProgressSuccessLine
    position absolute 
    top 5px
    left 50%
    width 2px
    bottom 5px

  .txProgressSuccessItem
    position absolute
    display flex
    align-items center
    justify-content center
    box-sizing border-box
    padding-top 1px
    margin 5px 0px

    .txProgressSuccessItemValue
      display flex
      justify-content center
      align-items center
      font-size 14px
      font-family 'FiraCode'
      letter-spacing -0.5px

    .txProgressSuccessItemLabel
      font-size 8.5px
      display flex
      justify-content center
      align-items center
      font-weight 300
      text-transform uppercase
      padding 4px

  .txProgressSuccessItem:last-child
    border-right none

  .txProgressSuccessItemLeft
    left 0
    width 130px
  .txProgressSuccessItemCenter
    right 113px
    left 130px
    border-left 2px solid var(--ghostA)
  .txProgressSuccessItemRight
    right 0
    width 110px
    border-left 2px solid var(--ghostA)

.txProgressHidden
  opacity 0
  pointer-events none

.txSummary
  display flex
  justify-content center
  align-items center
  height 100%
  width 100%

.txProgressDetailExpand
  color var(--outerspace05)
  font-size 11px

.txProgressDetailError
  padding 0px 10px

.txStatusCompact
  bottom 60px

.infoPane
  padding 0px 60px
  text-align center
  line-height 20px
  font-weight 400

.txBar
  position absolute
  z-index 1001
  height 58px
  top 4px
  left 20px
  right 20px
  // overflow hidden
  transition var(--standard)

  .txProgress
    .txProgressBack
      position absolute
      top 0
      right 0px
      bottom 0
      left 0px
      z-index 1001

      .txProgressLine
        position absolute
        top 37px
        left 0px
        right 0px
        height 2px
        margin-top -1px
        background var(--ghostY)
        z-index 982

      .txProgressSteps
        position absolute
        top 0
        right 50px
        bottom 0
        left 48px
        z-index 994
        display flex
        .txProgressStep
          position relative
          width calc(100% / 3)
          height 100%

          .txProgressStepIcon
            position absolute
            z-index 996
            left 50%
            top 0
            margin-left -20px
            width 40px
            height 40px
            box-sizing border-box
            transition var(--standard)
            transform translateZ(0px)
            cursor help
            *
              pointer-events none

          .txProgressStepIcon:hover
            svg
              color var(--good)

          .txProgressStepIconHidden
            transform translateY(-50px)
            opacity 0
            transition-delay 500
            transition var(--standardFast)

          .txProgressStepMarker
            position absolute
            z-index 996
            left 50%
            top 37px
            height 12px
            width 12px
            margin-top -6px
            margin-left -6px
            border-radius 12px
            background var(--ghostA)

          .txProgressStepCenter
            position absolute
            z-index 997
            left 50%
            top 37px
            height 6px
            width 6px
            margin-top -3px
            margin-left -3px
            border-radius 3px
            background var(--ghostZ)

          .txProgressStepCenterOn
            background var(--outerspace)

    .txProgressFront
      position absolute
      top 0
      right 0px
      bottom 0
      left 0
      z-index 1001
      transition var(--standard)
      pointer-events none

      .txProgressSlide
        position absolute
        top 0
        right 61px
        bottom 0
        left 0
        z-index 1001
        transition var(--standardSlow)
        pointer-events none

        .txProgressTail
          position absolute
          top 37px
          left 0
          right 0
          height 2px
          margin-top -1px
          background var(--outerspace)
          transition var(--standard)

        .txProgressLoading
          position absolute
          z-index 1007
          height 16px
          width 16px
          border-radius 12px 
          overflow hidden
          animation spin 0.7s infinite linear
          position absolute
          z-index 1012
          top 37px
          right -8px
          margin-top -8px
          will-change transform

          .txProgressLoadingBox
            position absolute
            z-index 1008
            top 0
            right 0
            width 50%
            height 50%
            background var(--outerspace)

          .txProgressLoadingCenter
            position absolute
            z-index 1010
            height calc(100% - 4px)
            width calc(100% - 4px)
            border-radius 18px
            background var(--ghostD)
            top 2px
            left 2px

          .txProgressLoadingDot
            position absolute
            z-index 1011
            height calc(100% - 8px)
            width calc(100% - 8px)
            border-radius 18px
            top 4px
            left 4px
            background var(--outerspace)

  .txBarSheen
    position absolute
    z-index 3002
    height 30px
    width 200px
    animation sheen 12s infinite ease
    background linear-gradient(90deg, rgba(247, 251, 255, 0), rgba(237, 241, 255, 0.5), rgba(247, 251, 255, 0))
    background-blend-mode multiply

.txBarSuccess
  .txProgressTail
    transition var(--standardSlow)
    background var(--good) !important
  .txProgressLoadingBox
    transition var(--standardSlow)
    background var(--good)  !important
  .txProgressLoadingDot
    transition var(--standardSlow)
    background var(--good)  !important
  .txProgressStepCenterOn
    transition var(--standardSlow)
    background var(--good)  !important

.txBarError
  .txProgressTail
    transition var(--standardSlow)
    background var(--bad) !important
  .txProgressLoadingBox
    transition var(--standardSlow)
    background var(--bad) !important
  .txProgressLoadingDot
    transition var(--standardSlow)
    background var(--bad) !important
  .txProgressStepCenterOn
    transition var(--standardSlow)
    background var(--bad) !important


.txBarCondensed
  height 50px
  .txStep
    transform translateY(0px)
    transition var(--standard)

.confirmBar
  position absolute
  z-index 1001
  background var(--ghostD)
  height 60px
  width 310px
  bottom 10px
  border-radius 12px
  overflow hidden
  font-size 12px
  font-weight 300
  text-transform uppercase

  .confirmBarStartText
    position absolute
    left 0px
    top 0
    bottom 0
    width 60px
    display flex
    justify-content flex-start
    align-items center
    z-index 2450
    padding-left 19px
    color var(--spacewhite)
    svg
      fill var(--spacewhite)
      color var(--spacewhite)
  .confirmBarEndText
    position absolute
    right 0
    top 0
    bottom 0
    width 80px
    display flex
    justify-content flex-end
    align-items center
    z-index 1150
    padding-right 9px
    svg
      fill var(--outerspace)
      color var(--outerspace)
  .confirmBarStart
    z-index 1204
    position absolute
    left -70px
    width 120px
    height 120px
    transform rotate(45deg)
    top -29px
    border-radius 12px
    background var(--ghostD)
    border-radius 12px
    box-shadow 5px -5px 40px var(--thick)
  .confirmBarSent
    z-index 1202
    left 0px

  .confirmBarStep
    z-index 1000
    position absolute
    width 120px
    height 120px
    background var(--ghostD)
    box-shadow 5px -5px 40px var(--thick)
    transform rotate(45deg)
    top -29px
    margin-left -60px
    border-radius 12px

.confirmBarDropBottom
  box-shadow cardDrop, 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick)

.txMonitorBar
  position absolute
  left 10px
  right 10px
  top 10px
  height 30px
  border-radius 15px

.signerRequestSuccess
  .monitorIconIndicator
    background var(--good) !important

.signerRequestMonitor
  .txStatus
    transform translateY(0px)

.signerRequestError
  .monitorIconIndicator
    background var(--bad) !important
  .txProgressConfirmsItem
    svg
      color var(--bad) !important

.signerUnlockRequest
  display flex
  align-items center
  flex-direction column
  justify-content flex-end
  transform translateY(0px)
  height 3px
  transition var(--standard)
  font-size 12px
  font-weight 400
  text-transform uppercase
  letter-spacing 3px
  height 100px

.simpleJsonHeader
  font-size 13px
  padding 8px 2px
  font-weight 400
  margin-top 40px
  border-bottom 2px solid var(--ghostZ)
  text-transform uppercase
  color var(--good)
  letter-spacing 1px

.simpleJson
  font-size 14px

  .simpleJsonChild
    width 100%
    margin-top 22px

  .simpleJsonKey
    font-size 13px
    width 100%
    font-weight 500
    padding 0px 0px 0px 2px
    border-radius 12.5px
    box-sizing border-box
    max-width fit-content

  .simpleJsonKeyTx
    text-transform uppercase
    font-size 11px

  .simpleJsonValue
    margin 8px 10px 10px 3px
    border-left 2px solid var(--good)
    padding 4px 7px 2px 7px
    font-size 13px
    width calc(100% - 3px)
    box-sizing border-box
    word-wrap break-word
    font-family 'FiraCode'
    font-weight 300
    user-select all !important
    max-width fit-content
    position relative

@import './next'
@import '../TransactionRequest/style'
@import '../ChainRequest/style'
@import '../AddTokenRequest/style'
